<template>
  <div class="page-container">
    <header class="header">
      <h1 class="title">{{ data?.content?.title || 'Loading...' }}</h1>
    </header>
    <main class="main">
      <div class="grid-3">
        <div class="sidebar">
          <div class="card">
            <h2 class="subtitle">左侧栏目</h2>
            <List :items="data?.lists?.left || []" class="list" />
          </div>
        </div>
        <div class="content">
          <div class="card">
            <h2 class="subtitle">主要内容</h2>
            <p>{{ data?.content?.body || 'Loading...' }}</p>
          </div>
        </div>
        <div class="sidebar">
          <div class="card">
            <h2 class="subtitle">右侧栏目</h2>
            <List :items="data?.lists?.right || []" class="list" />
          </div>
        </div>
      </div>
    </main>
    <!-- <footer class="footer">
      <p>{{ data?.content?.footer || '© 2024' }}</p>
    </footer> -->
  </div>
</template>

<script setup lang="ts">
import { fetchLists, fetchContent } from '~/utils/api';
import List from '~/components/List.vue';

const { data } = await useAsyncData('pageData', async () => {
  const [lists, content] = await Promise.all([
    fetchLists(),
    fetchContent()
  ]);
  return { lists, content };
}, {
  server: true,
  lazy: false
});
</script>

<style lang="less" scoped>
.page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: @primary-color;
}

.header {
  padding: @spacing-lg;
  background-color: @primary-color;
  text-align: center;
}

.main {
  flex: 1;
  padding: @spacing-lg;
  
  .grid-3 {
    display: flex;
    gap: @spacing-lg;
  }
}

.sidebar {
  flex: 1 1 25%;
  .card {
    height: 100%;
  }
}

.content {
  flex: 1 1 50%;
  .card {
    height: 100%;
  }
}

.footer {
  padding: @spacing-md;
  background-color: @text-color;
  color: white;
  text-align: center;
}

@media (max-width: 768px) {
  .main {
    padding: @spacing-md;
  }
}
</style>
